<template>
  <section v-if="roles == '1'">
    <error />
  </section>
  <section v-else>
    <div class="info">
      <el-row><!--全体-->
        <el-col :span="20" :push='2'>

          <!--查询和新增-->
          <div>
            <el-form :inline="true">
              <el-form-item style="float: left" label="查询用户信息:">
                <el-input placeholder="请输入用户名......" auto-complete="off" v-model="keyUser"></el-input>
              </el-form-item>
              <el-form-item style="float: center">
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
              </el-form-item>
              <el-form-item style="float: right">
                <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增用户</el-button>
              </el-form-item>
            </el-form>
          </div><!--查询和新增结束-->

          <!--主体-->
          <div class="app-container">
            <el-table v-loading="listLoading" :data="(keyUser) ? filteredTableData : tableData"
              element-loading-text="Loading" border fit highlight-current-row>
              <el-table-column align="center" label="用户名" width="135">
                <template slot-scope="scope">
                  {{ scope.row.username }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="个人介绍" width="150">
                <template slot-scope="scope">
                  {{ scope.row.introduction }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="密码" width="140">
                <template slot-scope="scope">
                  {{ scope.row.password }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="手机号" width="140">
                <template slot-scope="scope">
                  {{ scope.row.phone }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="邮箱" width="140">
                <template slot-scope="scope">
                  {{ scope.row.email }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="用户权限" width="100">
                <template slot-scope="scope">
                  {{ scope.row.role }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="130">
                <template slot-scope="scope">
                  <span><el-button size="mini" icon="el-icon-edit"
                      @click="showEditDialog(scope.row)">编辑</el-button></span>
                  <span><el-button size="mini" type="danger" icon="el-icon-delete"
                      @click="handleDelete(scope.$index)">删除</el-button></span>
                </template>
              </el-table-column>
            </el-table>
          </div><!--主体结束-->

        </el-col>
      </el-row><!--全部结束-->
      <AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>
      <EditUser :dialogEdit="dialogEdit" :editData="selectedData" @editData="EditDataMethod"></EditUser>
    </div>
  </section>
</template>

<script>

import { sendcreate } from '@/api/form'
import { senduser } from '@/api/form'
import { senddelete } from '@/api/form'
import { displayUser } from '@/api/service-manage'
// import {getUserByUsername} from '@/api/form'
import AddUser from './AddUser.vue'
import EditUser from './EditUser.vue'
import error from "../../error/401.vue"
import { mapGetters } from 'vuex'

export default {
  components: {
    AddUser,
    EditUser,
    error
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data () {
    return {
      listLoading: false,
      keyUser: "",
      //数据列表
      tableData: [],
      filteredTableData: [],

      //要编辑的数据
      selectedData: null,
      //新增、编辑页面显示
      dialogAdd: {
        show: false
      },
      dialogEdit: {
        show: false
      },
    }
  },
  created () {
    this.fetchData()
    //this.filter()
  },
  computed: {
    ...mapGetters([

      'roles'
    ])
  },
  methods: {
    //展示用户信息
    fetchData () {
      this.listLoading = true
      displayUser().then(response => {
        this.tableData = Array.from(response.data.data.result)
        console.log("Data" + this.tableData)
        this.listLoading = false
      })
    },
    //新增用户
    showAddDialog () {
      this.dialogAdd.show = true;

    },
    getUserInfo (data) {
      sendcreate(data).then(response => {
        this.$message.push(response.data);
      })
        .catch(error => {
          this.$message.error('用户创建失败');
          console.log(error);
        })
    },
    // 修改用户方法
    showEditDialog (data) {
      this.selectedData = { ...data };
      this.dialogEdit.show = true;
    },
    EditDataMethod (data) {
      senduser(data)
        .then((response) => {
          // 处理成功的响应
          this.$message('用户信息修改成功！');
          const index = this.tableData.findIndex(item => item.id === data.id);
          if (index !== -1)
          {
            this.$set(this.tableData, index, data);
          }
        })
        .catch((error) => {
          // 处理错误的响应
          this.$message.error('用户信息修改失败！');
          console.log(error);
        });
    },
    // 删除用户方法
    handleDelete (index) {
      if (this.tableData[index].role == '2')
      {
        this.$message.error("无法删除管理员！");
        return;
      }
      // 发送删除用户的请求到后端
      senddelete({
        "username": this.tableData[index].username
      })
        .then(() => {
          // 处理成功的响应
          this.$message('用户删除成功！');
          this.tableData.splice(index, 1);
        })
        .catch((error) => {
          // 处理错误的响应
          this.$message.error('用户删除失败！');
          console.log(error);
        });
    },
    // 搜索
    search () {
      this.listLoading = false
      if (this.keyUser == null)
      {
        //this.fetchData()
        this.filteredTableData = this.tableData;
        return
      }
      const filteredData = this.tableData.filter(item => item.username === this.keyUser);
      this.filteredTableData = filteredData;
    },
    //查询接口
    // this.listLoading = true
    //   if(this.keyUser==""){
    //     this.fetchData()
    //     return
    //   }
    //   getUserByUsername({"username":this.keyUser})
    //   .then(response => {
    //     this.tableData = Array.from(response.data)
    //     console.log("Data"+this.tableData)
    //     this.listLoading = false
    //   })
    //   .catch(error => {
    //     console.error(error);
    //     this.$message.error('用户查询失败！');
    //     this.listLoading = false;
    //    });
  }
}
</script>

<style scoped>
.input-content {
  width: 500px;
}

.search-button {
  margin-left: 100px;
}
</style>
